<template>
    <div class="search">
        <pub-head isBorder="true"></pub-head>

        <!-- 头部 -->
        <div class="head ali-c flex">
            <router-link :to="'/'">首页 ></router-link>
            <span class="blue-c">&nbsp;资质服务</span>
        </div>
        
        <!-- 服务 -->
        <div class="service flexv">
            <div class="service-head flex ali-c">
                <div class="service-head-img">
                    <img src="~@/assets/service-ico.png" alt="">
                </div>
                <span class="">请选择服务项目</span>
            </div>
            <ul class="service-lists flexv">
                <li class="service-list flex" v-for="(item,index) in navs" :key="index">
                    <router-link :to="item.url + '/' + item.id" class="flex1 flex">
                        <span class="service-point"></span>
                        <p class="service-name flex1">{{item.name}}</p>
                    </router-link>
                </li>
            </ul>
        </div>

        <!-- 底部占位符 -->
        <div class="pub-foot-seat"></div>

        <pub-foot search="true"></pub-foot>
    </div>
</template>
<script>
import Vue from 'vue'
import { mapState } from 'vuex';
import pubHead from '@/components/head'
import pubFoot from '@/components/foot'
import { Toast } from 'vant';
export default {
    data() {
        return{
            navs: []
        }
    },
    computed: {
        ...mapState(['user'])
    },
    created(){
        Toast.loading('请稍后...')
        this.axios.get('http://jxjq.0791jr.com/index.php?m=App&c=Handle&a=index', {
            params:{
                uid: this.$store.state.user.uid
            }
        }).then(res => {
            if (res.data.code == 200) {
                const data = res.data.data;
                this.navs = data.InfoCate;
                Toast.clear();
            } else {
                Toast.clear();
                Toast({
                    duration: 1800,
                    message: res.data.msg
                })
            }
        })
    },
    components: {
        pubHead,
        pubFoot
    },
    methods: {
        
    }
}
</script>
<style lang="less" scoped>
.search {
    min-height: 100vh;
    background-color: #f5f5f5;
    .head {
        height: 0.8rem;
        padding: 0 0.24rem;
        font-size: 0.28rem;
        line-height: 120%;
        color: #999;
        span,a {
            font-weight: bold;
        }
    }
    // 服务项目
    .service {
        padding: 0.58rem 0.4rem;
        background-color: #fff;
        .service-head {
            font-size: 0.4rem;
            line-height: 120%;
            .service-head-img {
                width: 0.62rem;
                height: 0.62rem;
                img {
                    width: 100%;
                    height: 100%;
                }
            }
            span {
                margin-left: 0.24rem;
                font-weight: bold;
            }
        }
        .service-lists {
            width: 100%;
            .service-list {
                width: 100%;
                height: 1rem;
                margin-top: 0.5rem;
                .service-point {
                    width: 0.12rem;
                    height: 0.12rem;
                    margin: auto 0.18rem;
                    border-radius: 100%;
                }
                .service-name {
                    font-size: 0.32rem;
                    line-height: 1rem;
                    font-weight: bold;
                    text-align: center;
                    border-radius: 0.1rem;
                }
            }
            .service-list:nth-child(5n - 4) {
                .service-point{
                    background-color: #ff354d;
                }
                .service-name{
                    color: #ff354d;
                    background-color: #ffebed;
                }
            }
            .service-list:nth-child(5n - 3) {
                .service-point{
                    background-color: #2065f0;
                }
                .service-name{
                    color: #2065f0;
                    background-color: #e7f7fd;
                }
            }
            .service-list:nth-child(5n - 2) {
                .service-point{
                    background-color: #55d8c2;
                }
                .service-name{
                    color: #55d8c2;
                    background-color: #e5fcf7;
                }
            }
            .service-list:nth-child(5n - 1) {
                .service-point{
                    background-color: #ff9a23;
                }
                .service-name{
                    color: #ff9a23;
                    background-color: #fdf2e9;
                }
            }
            .service-list:nth-child(5n) {
                margin-bottom: 0.44rem;
                .service-point{
                    background-color: #a92fe9;
                }
                .service-name{
                    color: #a92fe9;
                    background-color: #f9efff;
                }
            }
        }
    }
    .pub-foot-seat {
        width: 100%;
        height: 0.98rem;
    }
}
</style>
